// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //里面存放的是 要从父组件中接收的数据

    //要接受的数据名称
    // aaa:{
    //   type:String,
    //   value:""
    // }
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // tabs:[
    //   {
    //     id:0,
    //     name:"首页",
    //     isActive:true
    //   },
    //   {
    //     id:1,
    //     name:"原创",
    //     isActive:false
    //   },
    //   {
    //     id:2,
    //     name:"分类",
    //     isActive:false
    //   },
    //   {
    //     id:3,
    //     name:"关于",
    //     isActive:false
    //   },
    // ]
  },

  /**
   * 组件的方法列表
   * 页面js文件中，存放事件回调函数之后，存放在data通层级下
   * 组件.js文件中，存放事件回调函数的时候，必须要存在methods中！！！
   * 
   * 点击触发事件的时候，触发父组件中的自定义事件，同时很粗啊你地数据给父组件
   * this.triggerEvent("父组件自定义事件的名称","要传递的参数")
   */
  methods: {
    handleItemTap(e){
      // console.log(e)
      /*
      绑定点击事件，需要在methods中绑定
      获取呗点击的索引
      获取原数组，并对数组循环
        给每个循环项，选中属性改为false
        给当前索引的项 添加激活选中效果
      */
      const {index} = e.currentTarget.dataset;
      this.triggerEvent("itemChange", {index})

      //解构 对复杂类型进行结构的时候 复制了一份 变量的引用而已
      // let {tabs} = this.data;
      //循环数组， 遍历数组的时候，修改了v，也会导致原数组被修改
      //最严谨的做法 重新拷贝一份 数组，在对这个数组的备份进行处理
      // let tabs = JSON.parse(JSON.stringify(this.data.tabs));
      //不要直接修改 this.data.数据
      // tabs.forEach((v,i) =>{
      //     i===index?v.isActive=true : v.isActive=false;
      // });
      // this.setData({
      //   tabs
      // })
    }
  }
})
